<template>
	<view class="wrapper">
		<u-navbar title="订单详情" @rightClick="rightClick" :autoBack="true">
		</u-navbar>
		<view class="head flex-row flex-y-center"
		:style="{paddingTop: top + 'px'}"
			v-if="odinfo.order.type == '1'">
			<view class="head1" v-if="odinfo.order.state == '1'">待付款</view>
			<view class="head1" v-if="odinfo.order.state == '2'">等待商家接单</view>
			<view class="head1" v-if="odinfo.order.state == '3'">
				<text v-if="odinfo.order.order_type == '2'">等待到店用餐</text>
				<text v-else>等待送达</text>
			</view>
			<view class="head1" v-if="odinfo.order.state == '4'">订单已完成</view>
			<view class="head1" v-if="odinfo.order.state == '5'">订单已评价</view>
			<view class="head1" v-if="odinfo.order.state == '6'">订单已取消</view>
			<view class="head1" v-if="odinfo.order.state == '7'">商家拒绝接单</view>
			<view class="head1" v-if="odinfo.order.state == '8'">等待商家退款</view>
			<view class="head1" v-if="odinfo.order.state == '9'">商家已退款</view>
			<view class="head1" v-if="odinfo.order.state == '10'">商家拒绝退款</view>
			<image src="../../../static/ymq_canyino2o/arrow-right-w.png" mode=""></image>
		</view>
		<view :style="{marginTop: top + 'px'}" class="head flex-col flex-y-center flex-x-center" 
			v-if="odinfo.order.type == '2'">
			<view class="zwxx">{{ odinfo.table.type_name }}({{ odinfo.table.name }})</view>
			<view class="head1" v-if="odinfo.order.dn_state == '1'">待付款</view>
			<view class="head1" v-if="odinfo.order.dn_state == '2'">订单已完成</view>
			<view class="head1" v-if="odinfo.order.dn_state == '3'">订单已关闭</view>
			<image src="../../../static/ymq_canyino2o/arrow-right-w.png" mode=""></image>
		</view>
		<view class="ddinfo">
			<view class="formbd">
				<!--navigator 一毛钱通知说跳转去掉-->
				<view class="flex-row flex-y-center sjname" openType="redirect"
					:url="'../seller/index?sjid=' + odinfo.store.id">
					<!-- <image :src="odinfo.store.logo"></image> -->
					<image src="/static/ymq_canyino2o/ddxq-dp.png"></image>
					<view class="flex-grow-1">
						{{ odinfo.store.name }}
					</view>
					<view class="flex-grow-0 flex-y-center">
						<!--<image-->
						<!--  src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/blackjt.png"-->
						<!--  style="width: 40rpx; height: 40rpx"-->
						<!--&gt;</image>-->
					</view>
				</view>
				<view class="cart-item flex-row flex-y-center" v-for="(item, index) in odinfo.good" :key="index">
					<view class="xzhiding" v-if="item.is_jc == '1'">加菜</view>

					<view class="flex-grow-0 flex-y-center">
						<image class="goods-pic" mode="aspectFill" :src="item.img"></image>
					</view>

					<view class="flex-grow-1 flex-col">
						<view class="flex-grow-1">
							<view class="goods-name">
								<text>{{ item.name }}</text>
								<text>￥{{ item.money }}</text>
							</view>
							<view class="attr-list">
								<view class="attr-item">{{ item.spec }}</view>
							</view>
						</view>
						<view class="flex-grow-0 flex-row">
							<view class="flex-grow-1 num">×{{ item.number }}</view>
						</view>
					</view>
				</view>
				<block v-if="odinfo.order.type == '1'">
					<view class="formbdyh flex-row flex-y-center">
						<view class="flex-row flex-y-center flex-grow-1">
							<!-- <view class="yhhead bao">包</view> -->
							<view v-if="odinfo.storeset.box_name != ''">{{odinfo.storeset.box_name}}</view>
							<view v-else>包装费</view>
						</view>
						<view class="flex-grow-0">￥{{ odinfo.order.box_money }}</view>
					</view>
					<view class="formbdyh flex-row flex-y-center">
						<view class="flex-row flex-y-center flex-grow-1">
							<!-- <view class="yhhead pei">配</view> -->
							<view>配送费</view>
						</view>
						<view class="flex-grow-0" v-if="odinfo.order.order_type == '1'">￥{{ odinfo.order.ps_money }}
						</view>
						<view class="flex-grow-0" style="color: #999" v-if="odinfo.order.order_type == '2'">到店用餐无配送费
						</view>
					</view>
				</block>
				<view class="formftyh">
					<view class="formbdyh flex-row flex-y-center" v-if="odinfo.order.zk_money != '0.00'">
						<view class="flex-row flex-y-center flex-grow-1">
							<!-- <view class="yhhead te">折</view> -->
							<view>会员折扣</view>
						</view>
						<view class="flex-grow-0">-￥{{ odinfo.order.zk_money }}</view>
					</view>
					<view class="formbdyh flex-row flex-y-center" style="width: 100%;">
						<view class="flex-row flex-y-center flex-grow-1">
							<!-- <view class="yhhead jian">减</view> -->
							<view>在线支付满减</view>
						</view>
						<view class="flex-grow-0">-￥{{ odinfo.order.mj_money }}</view>
					</view>
					<view class="formbdyh flex-row flex-y-center" v-if="odinfo.order.xyh_money != '0.00'">
						<view class="flex-row flex-y-center flex-grow-1">
							<view class="yhhead xin">新</view>
							<view>新客户下单立减</view>
						</view>
						<view class="flex-grow-0">-￥{{ odinfo.order.xyh_money }}</view>
					</view>
					<view class="weui-cells weui-cells_after-title"
						style="border-top: 1rpx solid #f4f4f4; font-size: 11pt" v-if="odinfo.order.yhq_money != '0.00'">
						<navigator class="weui-cell weui-cell_access" hoverClass="weui-cell_active">
							<view class="weui-cell__hd">
								<image mode="aspectFit"
									src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/personal/youhuiquan.png"
									style="margin-right: 15rpx;vertical-align: middle;width: 40rpx;height: 40rpx;"></image>
							</view>
							<view class="weui-cell__bd">商家优惠券</view>
							<view class="">-￥{{ odinfo.order.yhq_money }}</view>
						</navigator>
					</view>
					<view class="weui-cells weui-cells_after-title"
						style="border-top: 1rpx solid #f4f4f4; font-size: 11pt"
						v-if="odinfo.order.yhq_money2 != '0.00'">
						<navigator class="weui-cell weui-cell_access" hoverClass="weui-cell_active">
							<view class="weui-cell__hd">
								<image mode="aspectFit"
									src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/hb.png" style="margin-right: 15rpx;vertical-align: middle;width: 40rpx;height: 40rpx;"></image>
							</view>
							<view class="weui-cell__bd">红包</view>
							<view class="">-￥{{ odinfo.order.yhq_money2 }}</view>
						</navigator>
					</view>
					<view class="sfk flex-row flex-y-center">
						<!-- <view class="sfk-fv flex-grow-0">实付款</view> -->
						<view class="flex-grow-1 xiaoji">
							<view style="color: #F50000;font-size: 22rpx;">已优惠￥{{ odinfo.order.discount }}</view>
							<view style="color: #242222;font-size: 22rpx;">合计</view>
							<view style="color: #030303;font-size: 28rpx;">￥{{ odinfo.order.money }}</view>
						</view>
					</view>
				</view>

				<view class="formft">
					<view class="weui-cells weui-cells_after-title">
						<view class="weui-cell weui-cell_access" hoverClass="weui-cell_active"
							v-if="odinfo.storeset.is_cj == '1'">
							<view class="weui-cell__bd">{{ odinfo.storeset.cj_name }}</view>
							<view class="weui-cell__ft weui-cell__ft_in-access" style="color: #030303;">{{ odinfo.order.tableware }}份</view>
						</view>
						<view class="weui-cell weui-cell_access" hoverClass="weui-cell_active"
							v-if="odinfo.order.note != ''">
							<view class="weui-cell__bd" style="min-width: 120rpx">备注</view>
							<view class="weui-cell__ft" style="color: #030303;">{{ odinfo.order.note }}</view>
						</view>


						<view @tap="maketel" class="weui-cell weui-cell_access" :data-tel="odinfo.store.tel">
							<view class="weui-cell__hd">
								<image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/lxsj.png" style=" margin-right: 5px;vertical-align: middle;width: 20rpx;height: 20rpx;"></image>
							</view>
							<view class="weui-cell__bd lxsj">联系商家</view>
							<view @tap.stop.prevent="location" class="weui-cell__ft weui-cell__ft_in-access lxsj" style="color: #00B7FB;">地图导航
							</view>
						</view>


						<!-- #ifdef APP || MP-WEIXIN || H5 -->
						<view
							v-if="odinfo.order.type == '1' && (odinfo.order.state == '3' || odinfo.order.state == '4' || odinfo.order.state == '5' || odinfo.order.state == '8' || odinfo.order.state == '10')"
							@tap="daya_to_chat(odinfo.order.id, 0,'store' )"
							class="weui-cell weui-cell_access text-center">
							<view class="weui-cell__bd lxsj">与商家在线聊天</view>
						</view>
						<!-- #endif -->


					</view>
				</view>

				<view class="formft" style="
            margin-bottom: 0;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
						padding-top: 10rpx;
          ">
					<view class="weui-cells weui-cells_after-title">
						<view class="weui-cell">
							<view class="weui-cell__bd">订单号</view>
							<view class="weui-cell__ft">
								{{ odinfo.order.order_num }}
								<text @tap="copyText" class="copy" :data-text="odinfo.order.order_num">复制</text>
							</view>
						</view>
						<view class="weui-cell">
							<view class="weui-cell__bd">支付方式</view>
							<view class="weui-cell__ft" v-if="odinfo.order.pay_type == '1'">微信支付</view>
							<view class="weui-cell__ft" v-if="odinfo.order.pay_type == '2'">余额支付</view>
							<view class="weui-cell__ft" v-if="odinfo.order.pay_type == '4'">货到付款</view>
							<view class="weui-cell__ft" v-if="odinfo.order.pay_type == '5'">餐后支付</view>
						</view>
						<view class="weui-cell">
							<view class="weui-cell__bd">下单时间</view>
							<view class="weui-cell__ft">{{ odinfo.order.time }}</view>
						</view>
					</view>
				</view>

				<view class="formft" style="
            margin-top: 0;
            border-top: none;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
						padding-bottom: 10rpx;
          " v-if="odinfo.order.type == '1'">
					<view class="weui-cells weui-cells_after-title">
						<view class="weui-cell" v-if="odinfo.order.order_type == '1'">
							<view class="weui-cell__bd">配送时间</view>
							<view class="weui-cell__ft">{{
                odinfo.order.delivery_time
              }}</view>
						</view>
						<view class="weui-cell" v-if="odinfo.order.order_type == '2'">
							<view class="weui-cell__bd">买家自提</view>
							<view class="weui-cell__ft">自提时间：{{ odinfo.order.delivery_time }}</view>
						</view>
						<view class="weui-cell" v-if="odinfo.order.order_type == '1'" style="align-items: flex-start;">
							<view class="weui-cell__bd">收货地址</view>
							<view class="weui-cell__ft">
									<text style="display: block;">{{ odinfo.order.address }}</text> 
									<text style="display: block;">{{ odinfo.order.name + '  ' + odinfo.order.sex == '1' ? '(先生)' : '(女士)' + ' ' + odinfo.order.tel }}</text> 
							</view>
						</view>
						<!-- <view class="weui-cell">
							<view class="weui-cell__bd">联系方式</view>
							<view class="weui-cell__ft">
								{{ odinfo.order.name }}
								<text v-if="odinfo.order.sex == '1'">(先生)</text>
								<text v-if="odinfo.order.sex == '2'">(女士)</text>
								{{ odinfo.order.tel }}
							</view>
						</view> -->
						<view class="weui-cell" v-if="odinfo.order.order_type == '1'">
							<view class="weui-cell__bd">配送方式</view>
							<view class="weui-cell__ft">{{ odinfo.storeset.ps_mode }}</view>
						</view>

						<!-- #ifdef APP || MP-WEIXIN || H5 -->
						<!--等待送达时候才可以聊天-->
						<!-- // odinfo.order.order_type 不传递=0=外卖订单  2=充值订单 3=会员订单 95=跑腿订单 -->
						<view
							v-if="odinfo.order.type == '1' && (odinfo.order.state == '3' || odinfo.order.state == '4' || odinfo.order.state == '5' || odinfo.order.state == '8' || odinfo.order.state == '10') && odinfo.order.rider_id>0"
							@tap="daya_to_chat(odinfo.order.id, 0,'runner' )"
							class="weui-cell weui-cell_access text-center">
							<view class="weui-cell__bd lxsj">与骑手在线聊天</view>
						</view>
						<!-- #endif -->

						<!-- #ifdef MP-TOUTIAO -->
						<view
							v-if="odinfo.order.type == '1' && (odinfo.order.state == '3' || odinfo.order.state == '4' || odinfo.order.state == '5' || odinfo.order.state == '8' || odinfo.order.state == '10') && odinfo.order.rider_id>0"
							@tap="daya_to_call(odinfo.order.id, 0,'runner' )"
							class="weui-cell weui-cell_access text-center">
							<view class="weui-cell__bd lxsj">拨打骑手电话</view>
						</view>
						<!-- #endif -->



					</view>
				</view>

				<view class="formft" v-if="
            odinfo.order.order_type != '2' &&
            odinfo.order.state == '3' &&
            odinfo.order.type == '1' &&
            odinfo.storeset.ps_mode != '商家配送'
          ">
					<view class="weui-cells__title headtitle">骑手信息</view>
					<view class="weui-cells weui-cells_after-title">
						<view class="weui-cell">
							<view class="weui-cell__bd">配送骑手</view>
							<view class="weui-cell__ft flex-row flex-y-center" v-if="odinfo.storeset.ps_mode == '达达配送'">
								<view @tap="lxqs" class="flex-row flex-y-center lxqs"
									:data-tel="odinfo.order.dd_info.dm_mobile">
									<image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/lxsj.png"></image>
									<view>{{ odinfo.order.dd_info.dm_mobile }}</view>
								</view>
								<view>{{ odinfo.order.dd_info.dm_name }}</view>
							</view>

							<view class="weui-cell__ft flex-row flex-y-center"
								v-else-if="odinfo.storeset.ps_mode == '快服务配送'">
								<view @tap="lxqs" class="flex-row flex-y-center lxqs"
									:data-tel="odinfo.order.kfw_info.courier_mobile">
									<image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/lxsj.png"></image>
									<view>{{ odinfo.order.kfw_info.courier_mobile }}</view>
								</view>
								<view>{{ odinfo.order.kfw_info.courier_name }}</view>
							</view>

							<view class="weui-cell__ft flex-row flex-y-center" v-else>
								<view v-if="odinfo.order.pt_info.qs_tel!=''" @tap="lxqs"
									class="flex-row flex-y-center lxqs" :data-tel="odinfo.order.pt_info.qs_tel">
									<image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/lxsj.png"></image>
									<view>{{ odinfo.order.pt_info.qs_tel }}</view>
								</view>
								<view>{{ odinfo.order.pt_info.qs_name }}</view>
							</view>




						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import cardlist from '@/ymq_canyino2o/dist/cardlist/index'
	import gettel from '@/ymq_canyino2o/dist/gettel/index'
	var qqmapsdk
	var app = getApp()
	var util = require('../../utils/util.js')
	var QQMapWX = require('../../utils/qqmap-wx-jssdk.js')
	export default {
		components: {
			cardlist,
			gettel
		},
		data() {
			return {
				color: '#34aaff',

				odinfo: {
					order: {
						type: '',
						state: '',
						dn_state: '',
						box_money: '',
						order_type: '',
						ps_money: '',
						zk_money: '',
						mj_money: '',
						xyh_money: '',
						yhq_money: '',
						yhq_money2: '',
						discount: '',
						money: '',
						tableware: '',
						note: '',
						delivery_time: '',
						address: '',
						sex: '',

						dd_info: {
							dm_mobile: '',
							dm_name: ''
						},

						kfw_info: {
							courier_mobile: '',
							courier_name: ''
						},

						pt_info: {
							qs_tel: '',
							qs_name: ''
						},

						order_num: '',
						pay_type: '',
						time: ''
					},

					table: {
						type_name: '',
						name: ''
					},

					store: {
						id: '',
						logo: '',
						name: '',
						tel: ''
					},

					good: [],

					storeset: {
						box_name: '',
						is_cj: '',
						cj_name: '',
						ps_mode: ''
					}
				},

				clock: '',
				top: 0
			}
		},
		onLoad: function(o) {
			app.globalData.setNavigationBarColor(this)
			console.log(o)
			var that = this
			app.globalData.util.request({
				url: 'entry/wxapp/OrderInfo',
				cachetime: '0',
				data: {
					order_id: o.oid
				},
				success: function(o) {
					console.log(o)
					if ('' != o.data.order.pt_info) {
						var a = JSON.parse(o.data.order.pt_info)
						o.data.order.pt_info = a
					}
					if ('' != o.data.order.dd_info) {
						var t = JSON.parse(o.data.order.dd_info)
						o.data.order.dd_info = t
					}
					if ('' != o.data.order.kfw_info) {
						var e = JSON.parse(o.data.order.kfw_info)
						o.data.order.kfw_info = e
					}
					console.log(o.data, a, t, e)
					that.setData({
						odinfo: o.data
					})
				}
			})
		},
		onReady: function() {},
		onShow: function() {
			this.top = uni.getSystemInfoSync().statusBarHeight + 44;
		},
		onHide: function() {},
		onUnload: function() {},
		onPullDownRefresh: function() {},
		onReachBottom: function() {},
		onShareAppMessage: function() {},
		methods: {
			rightClick() {
				uni.navigateBack(-1)
			},
			daya_to_chat(order_id, order_type, user_type) { //user_type = 'runner', 'store', 'user'
				app.globalData.util.request({
					url: 'entry/wxapp/get_uni_app_uni_id',
					data: {
						order_id: order_id,
						user_type: user_type,
						order_type: order_type,
					},
					success: (res) => {
						if (res.data.code == 1) {
							uni.navigateTo({
								url: '/ymq_canyino2o/pages/dyIm/chat/chat?user_id=' + res.data.data
							});
						} else {
							uni.showModal({
								title: '提示',
								content: res.data.msg,
								showCancel: false
							})
						}
					}
				});
			},
			daya_to_call(order_id, order_type, user_type) { //user_type = 'runner', 'store', 'user'
				app.globalData.util.request({
					url: 'entry/wxapp/get_uni_app_uni_id',
					data: {
						order_id: order_id,
						user_type: user_type,
						order_type: order_type,
					},
					success: (res) => {
						if (res.data.code == 1) {
							uni.makePhoneCall({
								phoneNumber: res.data.data
							})
						} else {
							uni.showModal({
								title: '提示',
								content: res.data.msg,
								showCancel: false
							})
						}
					}
				});
			},

			countdown: function(o) {
				var that = this
				var t = (o || []) - Math.round(new Date().getTime() / 1000) || []
				that.setData({
					clock: that.dateformat(t)
				})
				if (t <= 0) {
					that.setData({
						clock: false
					})
				} else {
					if (0 < t) {
						setTimeout(function() {
							t -= 1000
							that.countdown(o)
						}, 1000)
					}
				}
			},

			dateformat: function(o) {
				var a = Math.floor(o)
				var t = Math.floor(a / 3600 / 24)
				var e = Math.floor((a / 3600) % 24)
				var n = Math.floor((a / 60) % 60)
				var r = Math.floor(a % 60)
				if (t < 10) {
					t = '0' + t
				}
				if (e < 10) {
					e = '0' + e
				}
				if (r < 10) {
					r = '0' + r
				}
				if (n < 10) {
					n = '0' + n
				}
				return {
					day: t,
					hr: e,
					min: n,
					sec: r
				}
			},

			lxqs: function(o) {
				var a = o.currentTarget.dataset.tel
				uni.makePhoneCall({
					phoneNumber: a
				})
			},

			maketel: function(o) {
				var a = o.currentTarget.dataset.tel
				uni.makePhoneCall({
					phoneNumber: a
				})
			},

			copyText: function(o) {
				var a = o.currentTarget.dataset.text
				uni.setClipboardData({
					data: a,
					success: function() {
						uni.showToast({
							title: '已复制'
						})
					}
				})
			},

			location: function() {
				var o = this.odinfo.store.coordinates.split(',')
				var a = this.odinfo.store
				console.log(o)
				uni.openLocation({
					latitude: parseFloat(o[0]),
					longitude: parseFloat(o[1]),
					address: a.address,
					name: a.name
				})
			}
		}
	}
</script>
<style>
	@import './ddxq.css';
</style>
<style lang="scss" scoped>
	::v-deep .u-status-bar,
	::v-deep .u-navbar__content {
		background-color: transparent !important;
	}

	::v-deep .u-navbar__content__title,
	::v-deep .u-icon text {
		color: #fff !important;
	}

	.wrapper {
		min-height: 100vh;
		background: linear-gradient(180deg, #01B6FB, #07B4F6, #E9EEF6, #E8EAF0)
	}
</style>